<template>
    <div class="bx-editor addClaim">
        <van-nav-bar title="修改理赔状态" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <van-cell-group>
            <van-field readonly clickable required label="修改理赔状态" :value="statusName" placeholder="--请选择--" @click="statusPicker = true" />
            <div class="danger-box">
                <van-field required readonly clickable label="出险时间" :value="timeTurn(dangerDate)" placeholder="--请选择--" @click="dangerPop = true" />
                <van-field readonly clickable :value="dangerDate2" placeholder="--请选择--" @click="dangerPop2 = true" />
            </div>
        </van-cell-group>

        <van-popup v-model="statusPicker" position="bottom">
            <van-picker show-toolbar :columns="statusList" value-key="name" @cancel="statusPicker = false" @confirm="onStatus" />
        </van-popup>
        <van-popup v-model="dangerPop" position="bottom">
            <van-datetime-picker v-model="dangerDate" type="date" :min-date="minDate" @cancel="dangerPop = false" @confirm="dangerPop = false" />
        </van-popup>
        <van-popup v-model="dangerPop2" position="bottom">
            <van-datetime-picker v-model="dangerDate2" type="time" @cancel="dangerPop2 = false" @confirm="dangerPop2 = false" />
        </van-popup>
        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo()">保存</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "changeStatusClaim",
    data() {
        return {
            statusPicker: false,
            statusName: '',
            statusValue: '',
            statusList: [],
            minDate: new Date(1970, 0, 1),
            dangerDate: new Date(),
            dangerPop: false,

            dangerDate2: '12:00',
            dangerPop2: false,

        };
    },
    methods: {
        onStatus(value) {
            this.statusName = value.name;
            this.statusValue = value.key;
            this.statusPicker = false;
        },
        timeTurn(val) {
            return this.$formatDateTime(val, 'yyyy-MM-dd');
        },
        // timeTurn2(val) {
        //     return this.$formatDateTime(val, 'mm:ss');
        // },
        getOrderInfo() {
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                id: this.$route.query.id,

            };
            this.$post("/api/compensate_order/change", params)
                .then(res => {
                    if (res.code == 1) {
                        this.dangerDate = new Date(res.data.time_d)
                        this.dangerDate2 = res.data.time_hm
                        this.statusValue = res.data.claim_status
                        this.statusName = res.data.claim_text
                    } else {
                        this.$Toast(res.msg);
                    }
                }).catch(err => { });
        },
        getStatusList() {
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                id: this.$route.query.id,

            };
            this.$post("/api/compensate_order/claim_status_list", params)
                .then(res => {
                    if (res.code == 1) {
                        this.statusList = res.data
                    } else {
                        this.$Toast(res.msg);
                    }
                }).catch(err => {
                });
        },
        pushInfo() {
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                id: this.$route.query.id,
                time_d: this.timeTurn(this.dangerDate),
                time_hm: this.dangerDate2,
                claim_status: this.statusValue,

            };
            this.$post("/api/compensate_order/change_save", params)
                .then(res => {
                    if (res.code == 1) {
                        this.$Toast(res.msg);
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1500);
                    } else {
                        this.$Toast(res.msg);
                    }
                }).catch(err => {
                });
        },

    },
    created() {
        this.getOrderInfo()
        this.getStatusList()
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#fff");
    }
}
</script>

<style scoped lang='less'>
.foot-btn {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}
</style>